<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="品牌名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="bordsTableData" border class="table" header-cell-class-name="table-header" @row-click="func_trClick">
                <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
                <el-table-column prop="boardName" label="品牌名称"></el-table-column>
                <el-table-column label="品牌LOGO(查看大图)" align="center">
                    <template #default="scope">
                        <el-image class="table-td-thumb" :src="scope.row.boardLogo" :preview-src-list="[scope.row.boardLogo]">
                        </el-image>
                    </template>
                </el-table-column>
				<el-table-column prop="boardEnname" label="品牌英字"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="dataTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted, ref, reactive, toRefs, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import { findBoardInfoListPage,} from "../../../../api/hairmanager/board";
export default {
    name: "bordsTable",
	emits: ["boardsDictData"],
    setup(props, cex){
		onMounted(() => {
		});
        const router = useRouter();
		const route = useRoute();
        const query = reactive({
            keyword: "",
            pageNum: 1,
            pageSize: 10,
        });
        const bordsTableData = ref([]);
        const dataTotal = ref(0);
// =========================================================================================
        // 获取表格数据
        const func_getDictData = () => {
            findBoardInfoListPage(query).then((res) => {
                bordsTableData.value = res.data.list;
                dataTotal.value = res.dataTotal;
            });
        };
        // 查询操作
        const handleSearch = () => {
            query.pageNum = 1;
            func_getDictData();
        };
        // 分页导航
        const handlePageChange = (val) => {
            query.pageNum = val;
            func_getDictData();
        };
		const func_trClick = (row, event, column) => {
			cex.emit('boardsDictData',  {dicCode: row.id,dicName:row.boardName});
		};
		const initParams = () => {
			dataTotal.value = 0;
			func_getDictData();
		};
		initParams();
        return {
            query, bordsTableData, dataTotal,
            func_getDictData, handleSearch, handlePageChange, func_trClick,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
